main {
	overflow: scroll;
	height: 100%;
	// flex: 1;
	.banner {
		width: 100%;
		height: 180px;
		.swiper-container {
			width: 100%;
			height: 180px;
		}
		.index-swiper1 {
			background-image: url(../../assets/imgs/course-img01.jpg);
			background-position: top center;
			background-size: 500px;
		}
		.index-swiper2 {
			background-image: url(../../assets/imgs/course-img03.jpg);
			background-position: top center;
			background-size: 500px;
		}
		.index-swiper3 {
			background-image: url(../../assets/imgs/course-img04.jpg);
			background-position: top center;
			background-size: 500px;
		}
	}
	.content {
		flex-wrap: wrap;
		padding: 15px;
		div {
			border-radius: 15px;
			margin-bottom: 20px;
			box-sizing: border-box;
			padding: 12px 14px 0 14px;
			color: #01507d;
		}
		.ranking {
			width: 140px;
			height: 140px;
			margin-right: 22px;
			background: url(../../assets/imgs/index-card-rank.png) no-repeat -10px 30px;
			background-size: 100px;
			background-color: #54b0da;
			color: #01507d;
			p {
				line-height: 100px;
				font-size: 80px;
				text-align: right;
				color: white;
			}
		}
		.punch {
			width: 180px;
			height: 140px;
			background: url(../../assets/imgs/index-card-sum.png) no-repeat 5px 30px;
			background-size: 100px;
			background-color: #9fd9f8;
			p {
				width: 90px;
				height: 30px;
				font-size: 18px;
				border-radius: 10px;
				text-align: center;
				line-height: 30px;
				border: 2px solid #035379;
				bottom: 30px;
				right: 20px;
				// bottom: -60px;
				// right: -60px;
			}
		}
		.data {
			width: 162px;
			height: 100px;
			margin-right: 14px;
			background: url(../../assets/imgs/index-card-data.png) no-repeat;
			background-size: cover;
			color: white;
		}
		.badge {
			width: 162px;
			height: 100px;
			background: url(../../assets/imgs/index-card-badge.png) no-repeat 0px 10px;
			background-size: 100px;
			background-color: #9fd9f8;
			p {
				font-size: 60px;
				padding-left: 70px;
				display: inline;
			}
		}
		.train {
			width: 100%;
			height: 100px;
			color: white;
			background: url(../../assets/imgs/index-swiper-bg2.jpg) no-repeat 0px -17px;
			background-size: cover;
		}
		.run {
			width: 100%;
			height: 100px;
			background: url(../../assets/imgs/index-card-run.png) no-repeat 0px -69px;
			background-size: cover;
			color: white;
		}
	}
}
footer {
	width: 100%;
	height: 70px;
	bottom: 0;
	right: 0;
	background-color: white;
	box-sizing: border-box;
	ul {
		justify-content: space-between;
		box-shadow: 0px -1px 3px darkgrey;
		padding: 5px 10px;
		li {
			display: flex;
			flex-wrap: wrap;
			width: 45px;
			span {
				font-size: 45px;
			}
			.iconfont {
				font-size: 35px;
			}
		}
	}
	.active{
		color: #54b0da;
	}
}
